<template>
    <div class="changePwd">
        <p>
            <span>原密码</span>
            <input type="password" v-model="val1" placeholder="请输入原密码">
        </p>
        <p>
            <span>新密码</span>
            <input type="password" v-model="val2" placeholder="请输入新密码(6-16位密码，字母+数字组合)">
        </p>
        <p>
            <span>确认新密码</span>
            <input type="password" v-model="val3" placeholder="请再次确认新密码">
        </p>
        <button @click="submit">提交</button>
    </div>
</template>
<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      val1: "",
      val2: "",
      val3: "",
      reg2: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
      mobile: JSON.parse(window.sessionStorage.getItem("userInfo")).mobile
    };
  },
  methods: {
    submit() {
      if (this.val2 != this.val3) {
        this.$message.error("新密码与确认密码不相同");
      } else if (!this.reg2.test(this.val2)) {
        this.$message.error("新密码格式不对");
      } else if (!this.reg2.test(this.val1)) {
        this.$message.error("原始密码格式不对");
      } else if (this.val1 == this.val2) {
        this.$message.error("新密码不能与原始密码相同");
      } else {
        this.$ajax
          .post(this.Ipurl + "user/modifyPassword", {
            mobile: this.mobile,
            password: md5(this.val1),
            newPassword: md5(this.val2)
          })
          .then(res => {
            console.log(res.data)
            if (res.data.returnCode == 1000) {
              //   this.$message("密码修改成功");
              //   提示用户重新登录
              this.$confirm("密码修改成功，点击确定进行重新登录", "nice", {
                confirmButtonText: "重新登录",
                type:"success"
              }).then(res=>{
                // 修改密码之后localstorage重置为空
                  window.localStorage.setItem("password","")
                  this.$router.push({path:"/login"})
              });
            } else {
              this.$message("原密码错误");
            }
          });
      }
    }
  }
};
</script>
<style scoped>
.changePwd {
  width: 870px;
  height: 600px;
  /* border:1px solid red; */
  margin-top: 80px;
  margin-left: 60px;
  overflow: hidden;
  float: left;
}
.changePwd p {
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #d9dadd;
}
.changePwd p:nth-child(1) {
  margin-top: -25px;
}
.changePwd p span {
  display: inline-block;
  width: 130px;
  font-size: 18px;
  color: rgb(34, 34, 34);
  font-weight: bold;
}
.changePwd p input {
  width: 640px;
  font-size: 18px;
  color: rgb(217, 218, 221);
}
.changePwd p input::-webkit-input-placeholder {
  font-size: 16px;
  color: #c6c6c6;
}
.changePwd p input::-moz-placeholder {
  font-size: 16px;
  color: #c6c6c6;
}
.changePwd p input:-moz-placeholder {
  font-size: 16px;
  color: #c6c6c6;
}
.changePwd p input:-ms-input-placeholder {
  font-size: 16px;
  color: #c6c6c6;
}
.changePwd button {
  width: 80px;
  height: 30px;
  color: #fff;
  background: #ee4041;
  border-radius: 15px;
  margin-top: 50px;
}
</style>


